<template>
  <div class='cover' @click="closeCover">
    <div class="coverBox" @click="closeCover">
      <div class="swiper-container" >
        <div class="swiper-wrapper">
          <div class="swiper-slide">Slide 1</div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
      <div class="closeCover" @click="closeCover">
        关闭
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    props(){

    },
    data(){
      return {

      }
    },
    beforeCreate(){
    },
    created(){

    },
    beforeMount(){
    },
    mounted(){
      this.init();
    },
    beforeDestroy(){
    },
    destroyed(){
    },
    methods: {
      init: function () {
        var swiper = new Swiper('.swiper-container', {
          pagination: '.swiper-pagination',
          paginationClickable: true
        });
        $('.swiper-container').click(function (e) {
          e.stopPropagation();
        })
      },
      closeCover: function () {
//        this.$emit('isShowCover', 'false')
//          this.isShowCover=false;
        this.$parent.isShowCover=false;
      }
    },
    components: {}
  }
</script>
<style>
  .cover {
    z-index: 20;
    width: 32rem;
    height: 18rem;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
  }

  .coverBox {
    width: 9.8rem;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
  }

  .cover .swiper-container {
    width: 9rem;
    height: 9rem;
    border: 0.4rem solid #ffffff;
    margin: 4.3rem auto 4rem;
    overflow: visible;
  }

  .swiper-pagination-bullet {
    background-color: #fff;
    opacity: 0.5;
    height: 0.24rem;
    width: 0.24rem;
    margin:0.15rem !important;
  }

  .swiper-pagination-bullet-active {
    background-color: #fff;
    opacity: 1;
  }

  .swiper-pagination {
    position: absolute;
    z-index: 30;
    bottom: -2rem !important;
  }

  .closeCover {
    width: 1.3rem;
    height: 0.6rem;
    border: 0.02rem solid #fff;
    position: absolute;
    right: 0;
    top: 3.3rem;
    font-size: 0.30rem;
    line-height: 0.6rem;
    text-align: center;
  }
</style>
